<!-- <template>
	<el-form ref="form" :model="form" label-width="80px" style="text-align: left;">
	  <el-form-item label="昵称">
		  <el-col :span="11">
	    <el-input v-model="form.name"></el-input>
		</el-col>
	  </el-form-item>
	  <el-form-item label="身高(cm)">
		  <el-col :span="2">
	    <el-input v-model="form.height" placeholder="未填写"></el-input>
		</el-col>
	  </el-form-item>
	  <el-form-item label="性别">
	    <el-radio-group v-model="form.resource">
	      <el-radio label="男"></el-radio>
	      <el-radio label="女"></el-radio>
	    </el-radio-group>
	  </el-form-item>
	  
	  <el-form-item label="生日">
	    <el-col :span="11">
	      <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
	    </el-col>
	  </el-form-item>
	  
	  <el-form-item label="城市">
	    <el-select v-model="value" placeholder="未填写">
	      <el-option-group
	        v-for="group in options"
	        :key="group.label"
	        :label="group.label">
	        <el-option
	          v-for="item in group.options"
	          :key="item.value"
	          :label="item.label"
	          :value="item.value">
	        </el-option>
	      </el-option-group>
	    </el-select>
	</el-form-item>
	
	<el-form-item label="行业">
	  <el-select v-model="form.region" placeholder="请选择行业">
	    <el-option label="IT" value="shanghai"></el-option>
	    <el-option label="教育" value="beijing"></el-option>
		<el-option label="制造" value="beijing"></el-option>
		<el-option label="未填写" value="beijing"></el-option>
	  </el-select>
	</el-form-item>
	
	<el-form-item label="收入水平">
	  <el-select v-model="form.region" placeholder="未填写">
	    <el-option label="未填写" value="shanghai"></el-option>
	    <el-option label="月收入10000以下" value="beijing"></el-option>
		<el-option label="月收入10000-20000" value="beijing"></el-option>
		<el-option label="月收入20000以上" value="beijing"></el-option>
	  </el-select>
	</el-form-item>
	
	<el-form-item label="学历">
	  <el-select v-model="form.region" placeholder="未填写">
	    <el-option label="未填写" value="shanghai"></el-option>
	    <el-option label="初高中" value="beijing"></el-option>
		<el-option label="大专" value="beijing"></el-option>
		<el-option label="本科" value="beijing"></el-option>
		<el-option label="研究生" value="beijing"></el-option>
	  </el-select>
	</el-form-item>
	
	<el-form-item label="婚姻">
	  <el-select v-model="form.region" placeholder="未填写">
	    <el-option label="未填写" value="shanghai"></el-option>
	    <el-option label="已婚" value="beijing"></el-option>
		<el-option label="未婚" value="beijing"></el-option>
	  </el-select>
	</el-form-item>
	
	<el-form-item label="电话号码">
			  <el-col :span="11">
	  <el-input v-model="form.name" placeholder="未填写"></el-input>
			</el-col>
	</el-form-item>
	
	<el-col :span="11">
	<el-form-item label="签名">
	  <el-input type="textarea" v-model="form.desc" placeholder="这个人很懒什么都没留下~"></el-input>
	</el-form-item>
</el-col><br />
	  <el-form-item>
	    <el-button type="primary" @click="onSubmit">提交</el-button>
	    <el-button>取消</el-button>
	  </el-form-item>
	</el-form>
</template>

<script>
	 export default {
	    data() {
	      return {
	        form: {
	          name: '',
			  height:'',
	          region: '',
	          date1: '',
	          date2: '',
	          delivery: false,
	          type: [],
	          resource: '',
	          desc: ''
	        },
			
			options: [{
			         label: '热门城市',
			         options: [{
			           value: 'Shanghai',
			           label: '上海'
			         }, {
			           value: 'Beijing',
			           label: '北京'
			         }]
			       }, {
			         label: '城市名',
			         options: [{
			           value: 'Chengdu',
			           label: '成都'
			         }, {
			           value: 'Shenzhen',
			           label: '深圳'
			         }, {
			           value: 'Guangzhou',
			           label: '广州'
			         }, {
			           value: 'Dalian',
			           label: '大连'
			         }]
			       }],
			       value: ''
	      }
	    },
	    methods: {
	      onSubmit() {
	        console.log('submit!');
	      }
	    }
	  }
</script>

<style>
</style> -->

<template>
	<div style="width: 700px; ">
		<!-- 第一次填写用户信息弹窗 -->
		<!-- <el-dialog title="个人信息" :visible.sync="dialogFormVisible">
			<el-form :model="userInfo">
				<el-form-item label="昵称">
					<el-input v-model="userInfo.monicker"></el-input>
				</el-form-item>
				<el-form-item label="身高(cm)">
					<el-input v-model="userInfo.height"></el-input>
				</el-form-item>
				<el-form-item label="性别">
					<el-radio-group v-model="userInfo.gender">
						<el-radio label="男"></el-radio>
						<el-radio label="女"></el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="生日">
					<el-col :span="11">
						<el-date-picker type="date" placeholder="选择日期" v-model="userInfo.birthday" style="width: 100%;">
						</el-date-picker>
					</el-col>
				</el-form-item>
				<el-form-item label="城市">
					<el-input v-model="userInfo.city"></el-input>
				</el-form-item>
				<el-form-item label="收入水平">
					<el-input v-model="userInfo.income"></el-input>
		 	</el-form-item>
				<el-form-item label="最高学历">
					<el-input v-model="userInfo.education"></el-input>
				</el-form-item>
				<el-form-item label="是否单身">
					<el-radio-group v-model="userInfo.marriage">
						<el-radio label="是"></el-radio>
						<el-radio label="否"></el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="电话号码">
		 		<el-input v-model="userInfo.phone"></el-input>
				</el-form-item>
				<el-form-item label="个性签名">
					<el-input type="textarea" v-model="userInfo.signature"></el-input>
				</el-form-item>
		 </el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
			</div>
		</el-dialog> -->
		<div style="width: 500px; margin-left: 300px;">
			<el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" :size='100'>
			</el-avatar>
			<el-form ref="form" :model="userInfo" label-width="80px" :disabled='formShow'>
				<el-form-item label="昵称">
					<el-input v-model="userInfo.monicker"></el-input>
				</el-form-item>
				<el-form-item label="身高(cm)">
					<el-input v-model="userInfo.height"></el-input>
				</el-form-item>
				<el-form-item label="性别">
					<el-radio-group v-model="userInfo.gender">
						<el-radio label="男"></el-radio>
						<el-radio label="女"></el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="生日">
					<el-col :span="11">
						<el-date-picker type="date" placeholder="选择日期" v-model="userInfo.birthday" style="width: 100%;">
						</el-date-picker>
					</el-col>
				</el-form-item>
				<el-form-item label="城市">
					<el-input v-model="userInfo.city"></el-input>
				</el-form-item>
				<el-form-item label="收入水平">
					<el-input v-model="userInfo.income"></el-input>
				</el-form-item>
				<el-form-item label="最高学历">
					<el-input v-model="userInfo.education"></el-input>
				</el-form-item>
				<el-form-item label="是否单身">
					<el-radio-group v-model="userInfo.marriage">
						<el-radio label="是"></el-radio>
						<el-radio label="否"></el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="电话号码">
					<el-input v-model="userInfo.phone"></el-input>
				</el-form-item>
				<el-form-item label="个性签名">
					<el-input type="textarea" v-model="userInfo.signature"></el-input>
				</el-form-item>
				<el-form-item size="large">
					<el-button type="primary" @click="updateUserInfo" :disabled='editShow'>编辑</el-button>
					<el-button type="primary" @click="onSubmit" :disabled='submitShow'>提交</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {
					userId:1,
					monicker: '',
					height: '',
					gender: '',
					birthday: '',
					city: '',
					industry: '',
					income: '',
					education: '',
					marriage: '',
					signature: '',
					phone: ''
				},
				//编辑按钮是否禁用
				editShow: false,
				//提交按钮是否禁用
				submitShow: true,
				//表单是否禁用
				formShow: true,
				//存在域中的userId
				// userId: this.GLOBAL.userId,
				code: 200,
			}
		},
		methods: {
			onSubmit() {
				console.log('submit!');
				this.editShow = false;
				this.submitShow = true;
				this.formShow = true;
				if(this.code == 200){
					this.axios.put("http://localhost:8080/our", this.userInfo).then(res => {
						if (res.data.code == 200) {
							//修改成功
							this.$message.success(res.data.msg);
						} else {
							//修改失败
							this.$message.warning(res.data.msg);
						}
					
						this.getList();
					})
				}else{
					this.addUserInfo();
				
				}
				
			},
			updateUserInfo() {
				this.editShow = true;
				this.submitShow = false;
				this.formShow = false;
			},
			getList() {
				this.axios.get("http://localhost:8080/our/" + 1).then(res => {
					console.log(res.data.msg);
					// this.userInfo = res.data.data;
					if (res.data.code == 200) {
						this.userInfo = res.data.data;
						this.code = 200;
					} else {
						this.code = 500;
						this.formShow = false;
						this.editShow = true;
						this.submitShow = false;
						this.$message.warning(res.data.msg);
					}

				})
			},
			addUserInfo() {
				this.axios.post("http://localhost:8080/our/" + 1, this.userInfo).then(res => {
					if (res.data.code == 200) {
						//添加成功
						this.$message.success(res.data.msg);
					} else {
						//添加失败
						this.$message.warning(res.data.msg);
					}

					this.getList();
				})
			}
		},
		created() {
			this.getList();
		},
	}
</script>

<style>
</style>
